@import "commonvars";

@mixin editorTheme($class) {
  .editor-topbar, .editor-mobile {
    background: $editor-background;
    box-shadow: inset 0 -2px 0 0 $console-border-color;
  }

  .workSheetIndicator {
    color: $topbar-background;
    &.enabled {
      color: $worksheet-enabled;
    }
  }

  .vimModeIndicator {
    color: $topbar-background;
    &.enabled {
      color: $worksheet-enabled;
    }
  }

  .editor-buttons {
    .btn {
      color: $editor-button-color;

      &:hover {
        color: $hover-editor-button-color;
      }

      &.disabled {
        color: grey;
      }
    }
  }

  .editor-container {
    .switcher-show {
      color: $switcher-show-color;
      background: $hidden-console-background;
    }

    .switcher-hide {
      background: $console-background;
    }

    .console {
      color: $console-text-color;
      background: $console-background;
    }

    .handler {
      background: $console-border-color;
    }
  }

  .editor-mobile {
    background-color: $sidebar-background;
  }

  .cm-s-solarized {
    &.cm-s-dark {
      color: $base07;

      &.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection {
        background: rgba(255, 255, 255, 0.10);
      }

      .cm-diagnostic, .cm-tooltip {
        background-color: $sidebar-background;
        border: 1px solid $console-background;
      }

      .cm-scrollbar-filler {
        background-color:  $base07;
      }

      .inline {
        background-color: $console-background;
      }
    }

    &.cm-s-light {
      color: $base04;

      .cm-matchhighlight {
        border-bottom-color: $base01;
      }

      .cm-gutter-filler {
        background-color: $base07;
      }

      &.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection {
        background: rgba(0, 0, 0, 0.10);
      }

      .cm-scrollbar-filler {
        background-color:  $base07;
      }

      .cm-widget .fold,
      .cm-linewidget .compilation-info,
      .cm-linewidget .runtime-error,
      .cm-linewidget .line,
      .cm-linewidget .inline {
        background-color: $base01;
      }

      .cm-dialog {
        background-color: $base01;
        color: $base05;
      }
    }

    &.cm {
      box-shadow: none;
    }
  }
}
